// 指令判断文字是否溢出，然后hover显示el-tooltip
/**
 如果提示内容超出了屏幕，添加下面代码到全局css中

 .el-tooltip__popper {
    max-width: 70vw;
    white-space: pre-wrap!important;
    // word-break: keep-all;
}
 */
import htmlElementUtils from '../../utils/htmlElementUtils'
import Vue, {DirectiveOptions} from 'vue'
import {ElSizeListen} from "../../utils/ElSizeListen";
import typeOfUtils from "../../utils/type-of-utils";
import ToolTipCom from './ToolTipCom.vue'

let globToolTipRef
const vm1 = Vue.extend(ToolTipCom)
globToolTipRef = new vm1()
globToolTipRef.$mount()
document.body.appendChild(globToolTipRef.$el)

interface ShowTipHtmlElement extends HTMLElement {
  __showTooltip__: () => void;
  __closeTooltip__: () => void;
  __zhixin__listen__size__: () => void;
}

export interface BindingValue {
  value?: string;
  placement?: string;
  show?: boolean; // 是否显示 控制是否生成Tooltip
  everyShow?: boolean; // 是否每次鼠标进入都显示
}


const elEllipsis = (el: ShowTipHtmlElement, binding: BindingValue) => {
  const everyShow = binding.everyShow
  let ellipsis = false
  if (!everyShow) {
    ellipsis = htmlElementUtils.eleHasEllipsis(el)
  }
  removeEventListener(el)
  if (ellipsis || everyShow) {
    el.__showTooltip__ = () => {
      globToolTipRef.tip.referenceElm = el
      globToolTipRef.tip.$refs.popper && (globToolTipRef.tip.$refs.popper.style.display = 'none')
      globToolTipRef.tip.doDestroy()
      globToolTipRef.tip.setExpectedState(true)
      globToolTipRef.showContent = binding.value
      globToolTipRef.placement = binding.placement || 'top'
      globToolTipRef.tip.handleShowPopper()
    }
    el.__closeTooltip__ = () => {
      globToolTipRef.tip.setExpectedState(false)
      globToolTipRef.tip.handleClosePopper()
    }
    el.addEventListener('mouseenter', el.__showTooltip__)
    el.addEventListener('mouseleave', el.__closeTooltip__)
  }
}

function removeEventListener(el: ShowTipHtmlElement) {
  if (el.__showTooltip__) {
    el.removeEventListener('mouseenter', el.__showTooltip__)
  }
  if (el.__closeTooltip__) {
    el.__closeTooltip__()
    el.removeEventListener('mouseleave', el.__closeTooltip__)
  }
}

function elEllipsisAndListen(el: ShowTipHtmlElement, binding: BindingValue) {
  el.__zhixin__listen__size__ = () => {
    elEllipsis(el, binding)
  }
}

const ShowTooltip: DirectiveOptions = {
  // @ts-ignore
  inserted(el: ShowTipHtmlElement, binding) {
    // @ts-ignore
    ShowTooltip.componentUpdated(el, binding)
    Vue.nextTick(() => {
      // @ts-ignore
      ElSizeListen.addListen(el, el.__zhixin__listen__size__, true)
    })
  },
  // @ts-ignore
  componentUpdated(el: ShowTipHtmlElement, binding) {
    if (typeOfUtils.isNotObject(binding.value)) {
      Vue.nextTick(() => {
        elEllipsisAndListen(el, {
          everyShow: binding.modifiers?.everyShow || false,
          value: binding.value + '',
          show: true,
        })
      })
    } else {
      const value = binding.value as BindingValue
      if (value.show !== false) {
        Vue.nextTick(() => {
          elEllipsisAndListen(el, binding.value)
        })
      } else {
        Vue.nextTick(() => {
          removeEventListener(el)
        })
      }
    }
  },
  // @ts-ignore
  unbind(el: ShowTipHtmlElement) {
    removeEventListener(el)
    Vue.nextTick(() => {
      if (el.__zhixin__listen__size__) {
        ElSizeListen.removeListen(el, el.__zhixin__listen__size__)
      }
    })
  }
}

/**

 directives:[ // 渲染函数
 {
          name: 'showTooltip',
          value: '5555', // 显示提示
        }
 ],
 {
          name: 'showTooltip',
          value: {
           value: '',
 everyShow: true
          }, // 显示提示
        }
 ],

 v-show-tooltip="54545466" // 模板语法
 v-show-tooltip="{
 value: '',
 everyShow: true
 }" // 模板语法
 */


/**
 *  directives:[ // 渲染函数
 *  {
 *           name: 'showTooltip',
 *           value: RenderUtils.getTitle(vm, formItem,this.getTitle), // 显示提示
 *           modifiers: {
 *             everyShow: true // 是否总是显示
 *           }
 *         }
 *  ],
 *
 *  v-show-tooltip.everyShow="54545466" // 模板语法
 */


/**
 * 当绑定的值是对象是，对象里面的show优先级大于everyShow，且会控制是否板顶绑定事件和监听元素
 * .vShowToolTip{
 *   overflow: hidden;
 *   text-overflow: ellipsis;
 *   white-space: nowrap;
 *   width: 100%;
 * }
 */

export default ShowTooltip
















